import { modalPropsType } from "@/constants/types";
import { UploadOutlined } from "@ant-design/icons";
import { Modal, Form, Input, Upload, Button } from "antd";
import React from "react";

const {Item} = Form;
const rules = [{required: true, message: '此项必填'}];

const ClueImport = ({title, visible, onCancel, onSubmit}: modalPropsType) => {
  const [form] = Form.useForm();

  const handleSubmit = async () => {
    const res = await form.validateFields();
    const formData = new FormData();
    formData.append('file', res?.file?.[0]?.originFileObj);
    onSubmit(formData);
  }


  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      maskClosable={false}
    >
      <Form form={form} className="modal-form-padding">
        <Item label="导入线索" name="file" valuePropName="fileList" getValueFromEvent={normFile} rules={rules}>
          <Upload maxCount={1} beforeUpload={() => false}>
            <Button style={{width: 200, height: 30}} icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
        </Item>
      </Form>
    </Modal>
  );
}
export default ClueImport;